<template>
    <div class="goodsinfo-container">
        <!-- 实现动画的小球 -->
        <transition @before-enter="beforeEnter"  @enter="enter"  @after-enter="afterEnter">
            <div class="ball" v-show="flag"></div>
        </transition>
        <!-- 轮播图区域 -->
        <div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<swiper :lunbotu="lunbotu" :imgname="'src'" :isfull="true"></swiper>
				</div>
			</div>
		</div>
        <!-- 商品购买区域 -->
        <div class="mui-card">
			<div class="mui-card-header"> {{goodsinfo.title}} </div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p class="price">
                        市场价：<span style="margin-right:10px"><del>￥{{goodsinfo.market_price}}</del></span>
                        销售价: <span style="color:red;font-size:16px;font-weight:bold">￥{{goodsinfo.sell_price}}</span>
                    </p>
                    <p>
                        购买数量: <nobox  :max="goodsinfo.stock_quantity" @func="getSelectedCount"></nobox>
                    </p>
                    <div>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="addToCart">加入购物车</mt-button>
                    </div>
				</div>
			</div>
		</div>
        <!-- 商品参数区域 -->
        <div class="mui-card">
			<div class="mui-card-header">商品参数</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p>商品货号:{{goodsinfo.goods_no}}</p>  
                    <p>库存情况:{{goodsinfo.stock_quantity}}件</p>
                    <p>上架时间:{{goodsinfo.add_time|dateFormat}}</p>
				</div>
			</div>
			<div class="mui-card-footer btnarea">
                <mt-button type="primary" size="large" plain @click="goDesc">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain @click="goComment">商品评论</mt-button>
            </div>
		</div>
    </div>
</template>

<script>
import swiper from '../sub-conponents/Swiper.vue'
import nobox from '../sub-conponents/goodsinfo_nobox.vue'
import {mapMutations} from 'vuex'
export default {
    data(){
        return{
            lunbotu:[{src:"../img/photo01.jpg"},{src:"../../img/photo02.jpg"}],
            goodsinfo: {},
            flag: false,  //小球默认显示与隐藏的状态
            selectedCount: 1 //用户选择的商品数量，默认为1
        }
    },
    created(){
        // this.getlunbotu();
        this.getGoodsInfoId();
    },
    methods:{
        // async getlunbotu(){
        //     const{data} = await this.$http.get("http://api.cms.liulongbin.top/api/getthumimages/" + this.id);
        //     if(data.status === 0){
        //         return (this.lunbotu = data.message);
        //     }
        // }
        ...mapMutations(["addToCar"]),
        async getGoodsInfoId(){
            const{data} = await this.$http.get("http://api.cms.liulongbin.top/api/goods/getinfo/" + this.id);
            if(data.status === 0){
                return (this.goodsinfo = data.message[0]);
            }
        },
        goDesc(){
            this.$router.push("/home/goodsdesc/" + this.goodsinfo.id)
        },
        goComment(){
            // this.$router.push("/home/goodscomment/" + this.goodsinfo.id)
            this.$router.push({name: "goodscmt",params:{id: this.goodsinfo.id}})
        },
        addToCart(){
            //点击加入购物车
            this.flag = !this.flag;
            //调用mutations中的addToCar方法  没有通过mapmutations对mutations方法进行映射的用这个方法，比较麻烦
            // this.$store.commit('addToCar',{id:this.id,count:this.selectedCount});
            this.addToCar({id:this.id,count:this.selectedCount,selected:true,price:this.goodsinfo.sell_price})
        },
        beforeEnter(el){
            //动画开始之前设置小球的起始状态
            el.style.transform = "translate(0,0)"
        },
        enter(el,done){
            //入场动画结束之后，小球的终止状态
            el.offsetWidth;

            //动态获取小球的横纵坐标
            const ballPos = el.getBoundingClientRect();
            //动态获取徽标的横纵坐标
            const badgePos = document.querySelector('#badge').getBoundingClientRect();
            const left = badgePos.left - ballPos.left;
            const top = badgePos.top - ballPos.top;

            el.style.transform = "translate("+left+"px,"+top+"px)";
            //贝塞尔曲线在线生成器: http://cubic-bezier.com/#
            el.style.transition = "all 1s cubic-bezier(.46,-0.4,1,0.49)";
            done();
        },
        afterEnter(el){
            //入场动画完成之后的回调函数
            this.flag = !this.flag
        },
        getSelectedCount(c){
            //获取选择商品的数量
            // console.log(c);
            this.selectedCount = c;
        }
    },
    components:{
        swiper,
        nobox
    },
    props:['id']
}
</script>

<style lang="scss" scoped>
    .goodsinfo-container{
        background-color: #eee;
        overflow: hidden;

        .btnarea{
            flex-direction: column;
            button + button {
                margin-top: 15px;
            }
        }
        .ball{
            width: 15px;
            height: 15px;
            background-color:red;
            border-radius: 50%;
            position: absolute;
            z-index: 99;
            left: 142px;
            top: 370px;
            //将来小球要通过动画位移到的位置
            // transform: translate(96px,250px);
        }
    }
    
</style>